<template>
	<div class="toast" v-show="isShow">
		<div>{{message}}</div>
	</div>
</template>

<script>
	export default {
		name: "Toast",
		props: {
			/* message: {
				type: String,
				default(){
					return ''
				}
			},
			show: {
				type: Boolean,
				default(){
					return false
				}
			} */
		},
		data(){
			return {
				message: '',
				isShow: false
			}
		},
		methods: {
			show(message='默认文字', duration=1500){
				this.isShow = true
				this.message = message
				setTimeout(() => {
					this.message = ''
					this.isShow = false
				}, duration)
			}
		}
	}
</script>

<style scoped="scoped">
	.toast {
		position: fixed;
		top: 50%;
		left: 50%;
		background-color: rgba(0,0,0,.6);
		color: #fff;
		padding: 8px 10px;
		transform: translate(-50%, -50%);
		z-index: 999;
	}
</style>
